<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="cancel" width="40%">
    <template slot="title">
      <span >添加黑名单</span>
    </template>
    <el-form
    ref="refForm"
    :rules="refRule"
    :disabled="loading"
    :model="form" class="demo-form-inline">
    <el-form-item prop="blackType" width="300px" :rules="refRule.blackType">
      <el-col class="flex-box">
        <slot name="label">
          <div class="label"><b class="red">*</b>选择黑名单类型</div>
        </slot>
        <el-select v-model="form.blackType" >
          <el-option
            v-for="item in consts.BLACK_LIST_TYPE"
            :label="item.label"
            :key="item.value"
            :value="item.value"
            v-if="item.value!=''"
          ></el-option>
        </el-select>
      </el-col>
    </el-form-item>
    <el-form-item prop="blackTitle">
      <el-tip class="red" ><b>*</b>{{tip}}</el-tip>
      <!-- <el-tip class="red" v-if="form.blackType==1"><b>*</b>输入IP(多个IP用","号分隔，“*”号通配符可代表IP段):</el-tip> -->
      <el-col >
        <el-input type="textarea" spellcheck="false" rows="5" v-model.trim="form.blackTitle" ></el-input>
      </el-col>
      <el-col>
        <div style="padding: 0px 10px 10px 20px;"></div>
      </el-col>
    </el-form-item>
    <el-form-item prop="level" width="300px" :rules="refRule.level">
      <el-col class="flex-box">
        <slot name="label">
          <div class="label"><b class="red">*</b>黑名单群组</div>
        </slot>
        <el-select v-model="form.level">
          <el-option
            v-for="item in levelList"
            :label="item.levelName"
            :key="item.levelId"
            :value="item.levelId"
          ></el-option>
        </el-select>
      </el-col>
    </el-form-item>
    <el-form-item prop="remark" >
      <el-col>
        <slot name="label">
          <div class="label"><b class="red">*</b>备注</div>
        </slot>
        <el-input type="textarea"  rows="3" v-model.trim="form.remark" maxlength="22">
        </el-input>
      </el-col>
    </el-form-item>
    <div style="text-align:right">
      <el-button class="filter-item"
                 @click="cancel">取消
      </el-button>
      <el-button class="filter-item" type="primary" :loading="!istap"
                 @click="toSave">确认
      </el-button>
    </div>
  </el-form>
  <el-dialog
      width="30%"
      title="添加结果"
      v-if="innerVisible"
      :visible.sync="innerVisible"
      :show-close='false'
      append-to-body>
      <div class="result" v-if="result.noneExistents.length>0"><span class="color-blue">{{result.noneExistents.join('、')}}</span>{{result.noneExistents.length}}个{{form.blackType | getText}}不存在;</div>
      <div class="result" v-if="result.failStr.length>0"><span class="color-blue">{{result.failStr.join('、')}}</span>{{result.failStr.length}}个{{ form.blackType | getText}}已在黑名单中，无法重复添加;</div>
      <div class="result" v-if="result.successStr.length>0"><span class="color-blue">{{result.successStr.join('、')}}</span>{{result.successStr.length}}个{{ form.blackType | getText}}已成功加入黑名单。</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel" >确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      width="30%"
      title="提示"
      v-if="innerVisibleIP"
      :visible.sync="innerVisibleIP"
    :show-close='false'
      append-to-body>
        <div>当前添加的IP段会覆盖现有的IP记录：</div>
        <div v-for="ip in sameIpList">
          <div v-if="ip.RepetitionList.length>0">
             <div class="flex-start" >
              <p>新增IP段：<span class="color-blue">{{ip.incommingIp}}</span></p>
              <p>加入群组：{{levelName}}</span></p>
            </div>
            <el-table :data="ip.RepetitionList">
              <el-table-column  label="现有IP"  prop="ip"></el-table-column>
              <el-table-column  label="所在群组"  prop="level"></el-table-column>
            </el-table>
          </div>

        </div>
        <div class="tip">是否确认覆盖以上IP记录？</div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisibleIP = false">取 消</el-button>
          <el-button type="primary" @click="showDialog">确 定</el-button>
        </div>
    </el-dialog>
  </el-dialog>
</template>
<script>
import { form, grid, factory } from '@/build';
import { blackListAdd, blackListSameIp } from '@/services/api/risk';

export default {
  name: 'add-account-dialog',
  mixins: [form, grid, factory],
  props: ['dialogVisible', 'rowData', 'levelList'],

  data() {
    return {
      ipData: [],
      innerVisible: false, // 添加结果弹框
      innerVisibleIP: false, // IP类型2次弹框
      istap: true,

      sameIpList: [], // 重复IP结果
      result: {// 新增返回结果
        noneExistents: [], // 不存在
        successStr: [], // 成功
        failStr: [], // 失败
        blackType: '',
      },
      form: {
        blackTitle: undefined,
        level: undefined, // 群组
        blackType: '0', // 黑名单类型
        remark: undefined,
      },
      refRule: {
        blackType: [
          { required: true, message: '黑名单类型为必选项', trigger: 'change' },
        ],
        blackTitle: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
        ],
        level: [
          { required: true, message: '黑名单等级为必选项', trigger: 'change' },
        ],
        remark: [
          { required: true, message: '备注不能为空', trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    levelName() {
      return _.find(this.levelList, { levelId: this.form.level }).levelName;
    },
    tip() {
      return _.find(consts.BLACK_LIST_TYPE, { value: this.form.blackType }).tip;
    },
  },
  filters: {
    getText(value) {
      let text = '';
      consts.BLACK_LIST_TYPE.forEach((element) => {
        if (element.value == value && value != 1) {
          text = element.label;
        }
      });
      if (value == 1) {
        text = 'IP/IP段';
      }
      return text;
    },
  },

  methods: {
    cancel() {
      this.$emit('cancel');
    },
    toSave() {
      if (!this.istap) return;
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          this.istap = false;
          if (this.form.blackType != 1) { // 账户,设备，银行卡，手机
            this.doSave({ action: 'saveForm' });

          } else if (this.form.blackType == 1) { // ip
            this.doGet({ action: 'getSameIpList' });

          }
        } else {
          return false;
        }
      });
    },
    closeDialog() {
      this.innerVisible = false;
      this.dialogVisible = false;
    },
    showDialog() {
      this.innerVisibleIP = false;
      this.doSave({ action: 'saveForm' });
    },
  },
  mounted() {
    this.bindSave(blackListAdd, 'saveForm', 'form', {
      // successMessage: '添加成功',
      beforeSend: (data) => {
        data.blackTitle = data.blackTitle.replace('，', ',');
        return data;
      },
      // afterSuccess: ([result, data]) => {
      //   this.istap = true;
      //   if (!result) { this.istap = true; }
      // this.result = data;
      // this.innerVisible = true;
      // this.$parent.getAll();
      // },
      callback: ([result, data]) => {
        this.istap = true;
        if (result) {
          this.result = data;
          this.innerVisible = true;
          this.$parent.getAll();
          this.$notify({
            title: '保存成功',
            type: 'success',
            duration: 2000,
          });
        } else {
          this.$notify({
            title: `保存失败.${data && data.message}`,
            type: 'error',
            duration: 2000,
          });
        }
      },
    });
    this.bindGet(blackListSameIp, 'sameIpList', {// 获取重复Ip
      action: 'getSameIpList',
      beforeSend: data => ({
        ip: this.form.blackTitle,
      }),
      callback: ([result, data]) => {
        this.sameIpList = data;
        if (data.length > 0) {
          if (data.some(val => val.RepetitionList.length > 0)) {
            this.innerVisibleIP = true;
          } else {
            this.doSave({ action: 'saveForm' });
          }

        }
        this.istap = true;

      },
    });
  },

};
</script>

<style lang="scss" scoped>
 .red{color:#f56c6c !important;}
/deep/ .flex-box{display: flex;justify-content: flex-start;align-items: center;}
/deep/ .label{margin-right:10px}
.flex-start{display: flex;width:100%}
.flex-start p{flex:1;margin:18px 0 0 0}
/deep/ .el-dialog__body{padding-top:15px}
/deep/ .el-dialog{max-height: 600px;overflow-y: auto}
.tip{margin-top:20px;}
.color-blue{color:#409eff}
.result{line-height: 20px;margin-bottom:8px}
.result span{margin-right:5px}
</style>
